<template>
  <el-row v-for="todo, index in todoList" :key="todo.start">
    <el-col :span="24">
      <el-card class="todo-card">
        <el-tag type="primary">@start: {{ todo.start }}</el-tag>
        <!-- completedChanged方法参数改为todo，并补充其逻辑为添加end结束时间 -->
        <el-checkbox v-model="todo.completed" @change="completedChanged(todo)" class="todo-checkbox">
          {{ todo.detail }}
        </el-checkbox>
        <el-tag type="success" style="margin-left: 20px" v-show="todo.completed">@end: {{ todo.end }}</el-tag>
        <el-icon class="todo-del" size="large" @click="deleteTodo(index)">
          <CloseBold />
        </el-icon>
      </el-card>
    </el-col>
  </el-row>

</template>

<script setup>

  import { CloseBold } from '@element-plus/icons-vue';

  const emit = defineEmits(['delete-todo'])
  // TodoMain组件接收todoList
  defineProps({
    todoList: {
      type: Array,
      required: true
    }
  })

  // deleteTodo方法逻辑处理为提交时间
  const deleteTodo = (index) => {
    emit('delete-todo', index)
  }

  // completedChanged方法参数改为todo，并补充其逻辑为添加end结束时间
  const completedChanged = (todo) => {
    todo.end = new Date().toLocaleString()
  }


</script>

<style>
  .todo-card {
    text-align: left;
    margin-top: 20px;
  }

  .todo-checkbox {
    margin-left: 20px;
  }

  .todo-del {
    float: right;
    display: none;
  }

  .todo-card:hover .todo-del {
    display: block;
    color: rgba(233, 110, 10, 0.918);
    cursor: pointer;
    margin-top: 10px
  }
</style>
